<template>
    <div class="menu-box" :style="{'height':h}">
        <!-- <div class="menu-title" :style="`background-color:${play?'red':''}`"> -->
        <div class="menu-title" :class="{'active':play}">
            <div class="menu-btn" @click="play=!play;show=true">
                <div class="menu-btn-line" :class="{'line1-open':!play&&show,'line1-close':play}"></div>
                <div class="menu-btn-line" :class="{'line2-open':!play&&show,'line2-close':play}"></div>
                <div class="menu-btn-name" :class="{'title-open':!play&&show,'title-close':play}">菜单</div>
            </div>
        </div>
        <ul class="menu-list">
            <li @click="changePage('/home')" :class="{'menu1-open':play,'menu1-close':!play&&show}">
                <i class="iconfont icon-home"></i>
            </li>
            <li @click="changePage('/classify')" :class="{'menu2-open':play,'menu2-close':!play&&show}">
                <i class="iconfont icon-type"></i>
            </li>
            <li @click="changePage('/cart')" :class="{'menu3-open':play,'menu3-close':!play&&show}">
                <i class="iconfont icon-cart"></i>
            </li>
            <li @click="changePage('/about')" :class="{'menu4-open':play,'menu4-close':!play&&show}">
                <i class="iconfont icon-about"></i>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            play:false,
            h:"0px",
            timer:null,
            show:false
        }
    },
    watch:{
        play(nv){
            clearTimeout(this.timer);
            if(nv){
                this.h="auto";
            }else{
                this.timer=setTimeout(()=>{
                    this.h="0px";
                },1000)
            }
        }
    },
    methods: {
        changePage(arg){
            if(this.play){
                this.$router.push(arg);
                this.play=false;
            }
        }
    },
}
</script>
<style lang="less" scoped>
.menu-box{
    position:absolute;
    bottom:150px;
    right:60px;
    width:100px;
    // overflow:hidden;
    // padding-bottom:100px;
    >.menu-title{
        position:absolute;
        bottom:0px;
        width:100px;
        height:100px;
        background-color:rgba(0,0,0,0.6);
        border-radius:50%;
        text-align:center;
        cursor:pointer;
        >.menu-btn{
            width:100%;
            height:100%;
            box-sizing:border-box;
            padding:24px;
            >.menu-btn-name{
                font-size:22px;
                color:@white;
            }
            >.title-open{
                animation:reverseMenu 0.3s forwards;
                @keyframes reverseMenu {
                    0% {
                        transform:translateY(50px);
                    }
                    100%{
                        transform:translateY(0px);
                    }
                }
            }
            >.title-close{
                transform: translateY(50px);
                opacity: 0;
                animation:activeMenu 0.3s forwards;
                @keyframes activeMenu{
                    0%{
                        transform:translateY(0px);
                    }
                    100%{
                        transform:translateY(50px);
                    }
                }
            }
            >.menu-btn-line{
                height:6px;
                background-color:@white;
                margin:0px 2px 6px 2px;
            }
            >.line1-open{
                animation:reverseRight 0.3s forwards;
                @keyframes reverseRight{
                    0%{
                        transform:translateY(25px) rotate(45deg) scale(1.5,1);
                    }
                    100%{
                        transform:translateY(0px) rotate(0deg) scale(1,1);
                    }
                }
            }
            >.line1-close{
                animation:activeRight 0.3s forwards;
                @keyframes activeRight{
                    0%{
                        transform:translateY(0px) rotate(0deg) scale(1,1);
                    }
                    100%{
                        transform:translateY(25px) rotate(45deg) scale(1.5,1);
                    }
                }
            }
            >.line2-open{
                animation:reverseLeft 0.3s forwards;
                @keyframes reverseLeft{
                    0%{
                        transform:translateY(1.7vw) rotate(-45deg) scale(1.5,1);
                    }
                    100%{
                        transform:translateY(0px) rotate(0deg) scale(1,1);
                    }
                }
            }
            >.line2-close{
                animation:activeLeft 0.3s forwards;
                @keyframes activeLeft{
                    0%{
                        transform:translateY(0px) rotate(0deg) scale(1,1);
                    }
                    100%{
                        transform:translateY(1.7vw) rotate(-45deg) scale(1.5,1);
                    }
                }
            }
        }
    }
    >.active{
        background-color:@pink;
    }
    >.menu-list{
        
        list-style-type:none;
        color:@white;
        text-align:center;
        width:100px;
        margin-bottom:100px;
        >li{
            position:relative;
            background-color:rgba(0,0,0,0.6);
            width:100px;
            height:100px;
            border-radius:50%;
            box-sizing:border-box;
            line-height:100px;
            opacity:0;
            >i{
                font-size:50px;
            }
        }
        >.init{
            opacity:1;
        }
        >.menu1-open{
            animation:move1 0.8s forwards;
            @keyframes move1 {
                0%{
                    transform:translate(0px,400px);
                    opacity:0;
                }
                100%{
                    transform:translate(-26px,20px);
                    opacity:1;
                }
            }
        }
        >.menu1-close{
            animation:move2 0.8s forwards;
            @keyframes move2 { 
                0%{
                    transform:translate(-26px,20px);
                    opacity:1;
                }
                100%{
                    transform:translate(0px,400px);
                    opacity:0;
                }
            }
        }
        >.menu2-open{
            animation:move3 0.6s forwards;
            @keyframes move3 {
                0%{
                    transform:translate(0px,300px);
                    opacity:0;
                }
                100%{
                    transform:translate(-17.333vw,10px);
                    opacity:1;
                }
            }
        }
        >.menu2-close{
            animation:move4 0.6s forwards;
            @keyframes move4 { 
                0%{
                    transform:translate(-17.333vw,10px);
                    opacity:1;
                }
                100%{
                    transform:translate(0px,300px);
                    opacity:0;
                }
            }
        }
        >.menu3-open{
            animation:move5 0.4s forwards;
            @keyframes move5 {
                0%{
                    transform:translate(0px,200px);
                    opacity:0;
                }
                100%{
                    transform:translate(-29.667vw,10px);
                    opacity:1;
                }
            }
        }
        >.menu3-close{
            animation:move6 0.4s forwards;
            @keyframes move6 { 
                0%{
                    transform:translate(-29.667vw,10px);
                    opacity:1;
                }
                100%{
                    transform:translate(0px,200px);
                    opacity:0;
                }
            }
        }
        >.menu4-open{
            animation:move7 0.2s forwards;
            @keyframes move7 {
                0%{
                    transform:translate(0px,100px);
                    opacity:0;
                }
                100%{
                    transform:translate(-300px,20px);
                    opacity:1;
                }
            }
        }
        >.menu4-close{
            animation:move8 0.2s forwards;
            @keyframes move8 { 
                0%{
                    transform:translate(-300px,20px);
                    opacity:1;
                }
                100%{
                    transform:translate(0px,100px);
                    opacity:0;
                }
            }
        }
    }
}
</style>